<template>
  <div class="title">月儿兰远程控制</div>
  <svg-icon
    icon-class="lock-color"
    class-name="lock-icon"
    :style="{
      fontSize:'60px',
      margin:'56px auto 28px auto',
      display:'block'
    }"
  />
  <div class="input-box">
    <input
      placeholder="请输入账号密码或锁定密码解锁"
      type="password"
      v-model="password"
      @keyup.enter="handlePassword"
      @input="error_tip=''"
    >
    <span class="error-tip">{{error_tip}}</span>
  </div>
  <button
    :class="{
      'lock-button':true,
      'active': password
    }"
    @click="handlePassword"
  >立即解锁</button>
</template>

<script>
import {defineComponent,ref} from 'vue';
import {useRouter} from 'vue-router'
import {useStore} from "vuex";

export default {
  name: "lock",
  setup(){
    const router = useRouter()
    // const store = useStore();
    const password = ref('');
    const error_tip = ref('');

    //todo 锁定状态下, 用户无法被控制, 这样的话信令服务器应该保存这个状态
    //store.dispatch('app/setLockStatus');

    const handlePassword = () => {
      console.log('handlePassword');
      if(password.value === '123456'){ //todo 根据用户设置
        router.push('/');
      }else {
        error_tip.value = '密码错误'
      }
    };

    return {
      password,
      handlePassword,
      error_tip
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin: 120px auto 0 auto;
  text-align: center;
  font-size: 18px;
  color: rgb(196, 196, 196);
}

.lock-icon {
  font-size: 60px;
}

.input-box{
  position: relative;
  width: 300px;
  margin: 0 auto;

  input {
    display: block;

    width: 100%;
    height: 40px;
    border: 1px solid rgb(84, 84, 84);
    border-radius: 4px;
    padding-left: 12px;

    font-size: 16px;
    line-height: 38px;

    color: rgb(224, 224, 224);
    outline: none;
    background: transparent;

    &::placeholder {
      font-size: 14px;
      color: rgb(61, 61, 61);
    }

    &:focus {
      border-color: rgb(255, 141, 107);
    }
  }

  .error-tip {
    position: absolute;
    color: rgb(255, 8, 36);
    font-size: 12px;
    left: 12px;
    top: 48px;
  }
}


.lock-button {
  display: block;
  margin: 30px auto;
  height: 32px;
  line-height: 30px;
  width: 160px;
  border-radius: 16px;
  background: rgb(35, 35, 35);
  border: 1px solid rgb(35, 35, 35);
  color: rgb(153, 153, 153);

  &.active {
    background: transparent;
    border: 1px solid #FF8D6BFF;
    color: #FF8D6BFF;
  }

  &.active:hover {
    background: #FF8D6BFF;
    color: #ffffff;
    cursor: pointer;
  }
}

</style>
